<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024-02-21
  Time: 16:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/addexam.css?v=1">
    <style>
        .select-style {
            width: 200px;
            height: 20px;
            border-radius: 5px;
            border: 1px solid rgb(149, 184, 231);
        }
        .flex{
            margin-left: 40px;
        }
        .shufen{
            width: 50px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div class="div">
    <div class="div1">
        <div>自定义班级考试试卷</div>
        <div class="div1child">
            <div>试卷名称：<input type="text" name="pname"> *</div>
            <div>答题时间：<input type="text" name="duration">分钟 *</div>
        </div>
    </div>
    <div class="div2">
        <div>选择题</div>
    </div>
    <div class="div3">
        <div>试卷题头：</div>
        <div><textarea>针对以下题目，请选择最符合题目要求的答案。针对每一道题目，所有答案都选对，则该题得分，所选答案错误或不能选出所有答案，则该题不得分。</textarea> *</div>
    </div>
    <div class="div4">
        <div class="flex">
            <div>备注：试题总数不允许超过60道</div>
            <div id="sum">题目总数为：<span class="tmzs">0</span>道<button id="button">试题选择</button></div>
        </div>
        <div>
            <div class="wrapper">
                <div class="table">
                    <div class="thead">
                        <table>
                            <tr>
                                <td style="min-width: 20px;"></td>
                                <td style="min-width: 300px;">技能点</td>
                                <td style="min-width: 350px;">题目数</td>
                            </tr>
                        </table>
                    </div>
                    <div class="tbody">
                        <table>
                            <tr>
                                <td style="min-width: 20px;"></td>
                                <td style="min-width: 655px;"><span id="yiji"></span></td>
                            </tr>
                        </table>
                        <table>

                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <form method="get">
    <div class="div5">
        <div>
            <div>题目总数： <span class="tmzs"  id="tmzs">0</span>道</div>
            <div>选择题总分：<span class="fen">0</span>分</div>
            <div>试卷总分： <span class="fen" id="fen">0</span>分</div>
            <div>分值分配：<input type="radio" checked>平均分 <input type="radio">自定义</div>
            <div><input type="text" class="shufen" name="shufen" id="shufen" name="fen">分/题</div>
        </div>
        <div>
            <input type="submit" value="保存" onclick="doSave()"><input type="submit" value="返回" onclick="goBack()">
        </div>
    </div></form>
</div>
<div class="move" style="display: none;" id="move">
    <form>
        <div class="hegiht">
            <div>技能点列表(试题选择)</div>
        </div>
        <div class="stxz">
            <div>
                <div>试题来源：
                    <select class="select-style" name="department" theme="simple" cssClass="nwselect">
                    <c:forEach items="${list}" var="exam">
                        <option value="${exam.id}">${exam.nametype}</option>
                    </c:forEach>
                    </select></div>
                <div id="kecheng">课程：
                    <select class="select-style" name="one" id="one">
                        <c:forEach var="curriculum" items="${curriculums}">
                            <option value="${curriculum.cid}" data-section="${curriculum.csection}" ${curriculum.cid == 2 ? 'selected' : ''}>${curriculum.csection}</option>
                            <c:forEach var="curriculum1" items="${curriculum.children}">
                                <option value="${curriculum1.cid}" data-section="${curriculum1.csection}" ${curriculum1.cid == 2 ? 'selected' : ''}>----${curriculum1.csection}</option>
                            </c:forEach>
                        </c:forEach>
                    </select>
                </div>
            </div>
            <div>题目总数：<span class="tmzs">0</span> 道 <label>每门课程在选定技能点后，均需点击"保存"按钮。</label>
                <input type="button" value="保存" id="bc" onclick="saveTableData()">
                <input type="button" value="返回" id="fh">
            </div>
            <div class="biao">
                <div class="wrapper1">
                    <div class="table">
                        <div class="thead">
                            <table>
                                <tr>
                                    <td style="min-width: 20px;"></td>
                                    <td style="min-width: 20px;text-align: center"><input onclick="selectAll(event)" id="allCheckBox" type="checkbox" /></td>
                                    <td style="min-width: 301.5px;">技能点</td>
                                    <td style="min-width: 340px;">题目数</td>
                                </tr>
                            </table>
                        </div>
                        <div class="tbody">
                                <table id="table-two">
                                </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/addexam.js"></script>
<script>
    function doSave() {
        //收集所有的数据
        // 试卷名称,答题时间,题目总数,试卷总分,
        let pname = $('[name=pname]').val();
        let duration = $('[name=duration]').val();
        let tmzs = $('#tmzs').text();
        let fen = $('#fen').text();
        let shufen = $('[name=shufen]').val();
        //技能点id	题目数
        var checkboxes = $('input[name="cartCheckBox"]:checked');
        // 数据格式：知识点,个数;知识点,个数;知识点,个数;知识点,个数;
        let cid_number=[];//保存每个技能点id	题目数
        checkboxes.each(function () {
            var row = $(this).closest('tr').clone();
            var numberValue = row.find('.number').val(); // 获取当前行中.number输入框的值
            var knowledgetwo = row.find('[name=knowledgetwo]').val(); // 获取当前行中.number输入框的值
            // 清空并重新插入包含正确值的.number输入框
            cid_number.push(knowledgetwo+","+numberValue);
        });
        //转换成字符串
        let knowledgetwoString = cid_number.join(";")

        // 创建一个包含数据的对象
        var data = {
            pname: pname,
            duration: duration,
            tmzs: tmzs,
            fen: fen,
            shufen: shufen,
            knowledgetwoString: knowledgetwoString
        };

        // 使用AJAX发送POST请求到Servlet的URL
        $.ajax({
            url: 'TeacherPagerServlet',
            type: 'GET',
            data: data,
            success: function(response) {
                // 请求成功后的处理
                console.log(response);
                // 跳转到另一个页面
                window.location.href = 'PagerServlet';
            },
            error: function(xhr, status, error) {
                // 请求出错时的处理
                console.log(error);
            }
        });

    }
    function selectTwo(select) {
        // 取消一级知识点的复选框选中状态
        document.getElementById("allCheckBox").checked = false;
        $.getJSON("CurriculumTwoServlet", {"one": select.value}, function(data) {
            let table_two = $('#table-two');
            table_two.empty();
            var count=0;
            $.each(data, function() {
                count++;
                table_two.append(`<tr>
            <td style="min-width: 20px; text-align: center;">`+count+`</td>
            <td style="min-width: 20px;"><input onclick="selectSingle()" name="cartCheckBox" type="checkbox"/></td>
            <td style="min-width: 301.5px;">`+ this.csection +`</td>
            <td style="min-width: 340px;">
                <div style="position: relative;">
                    <div class="jian">
                        <div><img class="arrow-up" src="img/exam/上箭头.png"></div>
                        <div><img class="arrow-down" src="img/exam/下箭头.png"></div>
                    </div>
                    <input class="number" value="1"><input name="knowledgetwo" value="`+ this.cid +`" type="hidden"/>
                </div>
            </td>
            </tr>`);
            });
        });
    }
    $(document).on('click', '.arrow-up', function() {
        var input = $(this).closest("tr").find(".number");
        var value = parseInt(input.val(), 10);
        if (value < 50) {
            input.val(value + 1);
        }
    });
    $(document).on('click', '.arrow-down', function() {
        var input = $(this).closest("tr").find(".number");
        var value = parseInt(input.val(), 10);
        if (value > 1) {
            input.val(value - 1);
        }
    });
    $(document).ready(function() {
        var selectedOneValue = "";
        selectedOneValue = $("#one").val();
        // 在选择下拉框时更新 selectedOneValue 的值
        $("#one").change(function() {
            selectedOneValue = $(this).val();
        });
        // 点击保存按钮时触发
        $("#bc").click(function() {
            // 在这里使用 selectedOneValue 进行保存操作，比如保存到数据库或其他位置。
            // 将保存的一级知识点的值显示在 <span id="yiji"></span> 中
            var selectedText = $("#one").find("option:selected").text();
            $("#yiji").text(selectedText);
            // 在页面加载时初始化 <span id="yiji"></span> 的值
            var initialText = $("#one").find("option:selected").text();
            $("#yiji").text(initialText);
        });
    });
    $(document).ready(function() {
        var select = document.getElementById('one'); // 获取select元素
        selectTwo(select); // 调用selectTwo函数
        // 给下拉框绑定change事件
        $("#one").change(function() {
            selectTwo(this); // 切换下拉框内容时调用selectTwo函数
        });
    });
    function saveTableData() {
        var sum=0;
        var count = 0; // 重置计数器为0
        var checkboxes = $('input[name="cartCheckBox"]:checked');
        var targetDiv = $('.tbody > table:nth-child(2)');
        targetDiv.empty();
        checkboxes.each(function () {
            var row = $(this).closest('tr').clone();
            var numberValue = row.find('.number').val(); // 获取当前行中.number输入框的值
            // 清空并重新插入包含正确值的.number输入框
            var numberTd = row.find('.number').closest('td');
            var checkboxTd=row.find('input[name="cartCheckBox"]:checked').closest('td');
            checkboxTd.remove();
            numberTd.empty(); // 清空该td中的内容
            numberTd.append(numberValue);
            sum += parseFloat(numberValue);
            targetDiv.append(row);
            count++; // 每次复选框被选中时，计数器加1
        });
        if (count === 0) {
            alert("请至少选中一个复选框");
        } else {
            alert("表数据添加成功!");
            $('#move').hide();
        }
        $('.tmzs').text(sum);
        // $('.tmzs').text(count); // 更新类别总数
    }

    document.getElementById("shufen").addEventListener("input", function() {
        var shufen = parseFloat(this.value.trim() || 0);
        var count = parseFloat(document.querySelector('.tmzs').innerText);
        var totalFen = shufen * count;
        var fenElements = document.querySelectorAll('.fen');
        fenElements.forEach(function(element) {
            element.innerText = totalFen;
        });
    });

</script>
</body>
</html>
